<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>问题明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/myInfo.css" />
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css" />
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/plugins/eleditor/Eleditor.min.js"></script>
    <script src="/js/plugins/eleditor/webuploader.min.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script src="/js/common.js"></script>

</head>
<body style="background: url('/upload/2.bmp')">
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travelTroubles">
    <div>
        <strong><h4>问:</h4></strong>
        <h6 class="title" render-html="title"></h6>
        <input type="hidden" class="questionUser" id="id" name="id" render-value="id"/>
    </div>
    <hr>
    <div class="container">
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" width="50px" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <br>
                    <span render-html="author.nickName"></span>
                    <span class="addr" render-html="place.name">广州</span>
                    <span render-html="releaseTime"></span>
                </small>
            </div>
          <!--  <div class="attention col">
                <span class="addr" render-html="place.name">广州</span>
            </div>-->
        </div>
    </div>
    <hr>
    <strong>正文:</strong>
    <div class="container">
       <div class="content" render-html="troubleContent.content">
        </div>
    </div>
    <div class="container">
    </div>
    <br>

    <div class="container d-flex">
        &nbsp;&nbsp;&nbsp;
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn" data-status="0">
                <span id="travelLike">0</span>
            </i>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="p-2  flex-fill">
            <i class="fa  fa-commenting-o"  id="commentBtn">
                <span></span>
            </i>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="p-2  flex-fill">
            <i class="fa fa-star-o" data-status="0" id="collectBtn">
                <span id="travelCollect">0</span>
            </i>
        </div>
    </div>
    <hr>
    <strong>回答建议区:</strong>
    <hr>
    <div id="comment">
        <div class="comments" render-loop="list">
            <div class="container row comment">
                <div class="col-2 comment-head">
                    <a role="button">
                        <img class="rounded-circle" render-src="list.replier.headImgUrl" width="30px">
                    </a>
                </div>
                <div class="col comment-right">
                    <p class="authorName">
                        <span render-html="list.replier.nickName">逍遥</span>
                        <span class="comment-date" render-html="list.createTime"></span>
                    </p>
                    <div class="comment-content">
                        <a role="button">
                            <p render-html="list.content"></p>
                        </a>
                    </div>
                    <div>
                        <hr>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="container fixed-bottom">
        <div class="travels form-group">
            <div class="container">
                <form id="detailForm" method="post">
                    <input type="hidden" name="troubleId"/>
                    <div class="title">
                        <textarea class="form-control" name="content" id="title" placeholder="快快献上宝建!"></textarea>
                    </div>
                </form>
            </div>
            <hr/>
        </div>
        <div class="col" style="text-align: right;">
            <!--<i class="fa fa-floppy-o fg-fw" id="save"><span>保存</span></i>-->
            <i class="fa fa-check" id="release"><span>回复</span></i>
        </div>
    </div>
    <!--<div class="container d-flex">-->
    <!--<div class="p-2  flex-fill">-->
    <!--<i class="fa  fa-commenting-o" id="commentBtn"> 欢迎评论 </i>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="replybox">-->
    <!--&nbsp; <textarea cols="50" rows="5" placeholder="智囊团......" class="mytextarea"></textarea>-->
    <!--<button class="btn btn-info"><span class="send">发送</span></button>-->
    <!--</div>-->

    <!--<div class="container d-flex">-->
    <!--<div class="p-2  flex-fill">-->
    <!--<i class="fa fa-thumbs-o-up" id="likeBtn"> </i>-->
    <!--</div>-->
    <!--<div class="p-2  flex-fill"><i class="fa  fa-commenting-o" id=""> </i>-->
    <!--</div>-->
    <!--<div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"> </i>-->
    <!--</div>-->
    <!--</div>-->


</div>

<script>
    $(function () {
        var id = getParams().id;
        var travelId = getParams().id;
        console.log(id);
        $.get(baseUrl+"/travelTroubles/" + id, function (data) {
            $(".travelTroubles").renderValues(data);
            // renderView(data);
        });

        var currentPage = 1;
        var travels;
        var pages;
        var authorId;

        var user = JSON.parse(sessionStorage.getItem("user"));
        $.get(baseUrl+"/users/" + user.id + "/" + id + "/travelTroubleReplies", {pageSize: 2}, function (data) {
            // console.log(data);
            // $(".comments").renderValues(data);
            renderView(data);
            travels = data.list;
            // 需要用到总页数,所以先获取
            pages = data.pages;
            // authorId = data.list[0].authorId;
            // console.log(authorId);
        });
        $(window).scroll(function () {
            console.log(isEnd());
            if (isEnd()) {
                if (currentPage < pages) {
                    currentPage++;
                    console.log(currentPage);
                    $.get(baseUrl+"/users/" + user.id + "/" + id + "/travelTroubleReplies", {
                        currentPage: currentPage,
                        pageSize: 2
                    }, function (data) {
                        $.merge(travels, data.list);
                        renderView({list: travels});
                    });
                } else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '我也是有底线的',
                        autoClose: 1500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        });
        $(".replyBtn").click(function () {
            location.href = "/mine/editTravelTroubleReply.html?authorId=" + 1;
        });
        $("#detailForm input[name='troubleId']").val(id);
        var state;
        // 5.保存发布时状态设置,成员变量state = 0, state = 1,需要将表单变成异步提交
        $("#save").click(function () {
            state = 0;
            $("#detailForm").submit();
        });
        $("#release").click(function () {
            state = 1;
            $("#detailForm").ajaxSubmit(function (data) {
                if (data.success) {
                    location.href = "/mine/troubleContent.html?id=" + id;
                }
            });
        });

        $("#detailForm").attr("action", baseUrl+"/travelTroubles/" + id);







        //收藏操作:
        //查询收藏该游记的数量
        $.get(baseUrl+"/likesAndCollects"+"/travelCollectNum", {travelId: travelId}, function (data) {
            $('#travelCollect').html(data);
        })
        $('#collectBtn').click(function () {
            if ($("#collectBtn").data('status') == 0) {
                num = $("#travelCollect").html();
                num++;
                $("#travelCollect").html(num);
                $('#collectBtn').removeClass("fa-star-o").addClass("fa-star");
                $("#collectBtn").data('status', 1);
                $.ajax({
                    url: baseUrl+"/likesAndCollects"+"/travelCollect",
                    type: "post",
                    data: {userId: user.id, travelId: travelId, status: 1},
                    success: function (data) {
                        if (data.success) {
                            $(document).dialog({
                                overlayClose: true,
                                content: '收藏成功'
                            });
                        }
                    }
                })
            } else if ($("#collectBtn").data('status') == 1) {
                num = $("#travelCollect").html();
                num--;
                $("#travelCollect").html(num);
                $('#collectBtn').removeClass("fa-star").addClass("fa-star-o");
                $("#collectBtn").data('status', 0);
                $.ajax({
                    url: baseUrl+"/likesAndCollects"+"/deleteTravelCollect/"+user.id+"/"+travelId,
                    type: 'DELETE',
                    success: function (data) {
                        $(document).dialog({
                            overlayClose: true,
                            content: '取消收藏成功'
                        });
                    }
                })
            }
        })
        //收藏回显操作=============================================================================
        if (user) {
            $.get(baseUrl+"/likesAndCollects/travelCollectStatus",{userId: user.id, travelId: travelId}, function (data) {
                $('#collectBtn').data("status", data);
                if (data) {
                    $('#collectBtn').removeClass("fa-star-o").addClass("fa-star");
                }else{
                    $('#collectBtn').removeClass("fa-star").addClass("fa-star-o");
                }
            })
        }
        // ================游记点赞=========================
        // 用于开发游记点赞
        //查询点赞该攻略的数量
        $.get(baseUrl+"/likesAndCollects"+"/travelLikeNum", {travelId: travelId}, function (data) {
            $('#travelLike').html(data);
        })
        // 查询数据库当前用户是否已经对当前游记点赞
        $.get(baseUrl+'/likesAndCollects/travelLikeStatus',{userId: user.id, travelId: travelId}, function (data) {
            $('#likeBtn').data("status", data);
            if (data) {
                // 1 点赞
                $('#likeBtn').removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
            } else {
                // 0 不点赞
                $('#likeBtn').removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
            }
        });
        $('#likeBtn').click(function () {
            if ($("#likeBtn").data('status') ==0) {
                num = $("#travelLike").html();
                num++;
                $("#travelLike").html(num);
                $('#likeBtn').removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                $("#likeBtn").data('status', 1);
                // 进行点赞逻辑开发
                $.ajax({
                    url: baseUrl+"/likesAndCollects"+"/travelLike",
                    type: 'post',
                    data: {userId: user.id, travelId: travelId, status: 1},
                    success: function (data) {
                        if (data.success) {
                            $(document).dialog({
                                overlayClose: true,
                                content: '点赞成功'
                            });
                        }
                    }
                })
            } else if ($("#likeBtn").data('status') == 1) {
                num = $("#travelLike").html();
                num--;
                $("#travelLike").html(num);
                $('#likeBtn').removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                $("#likeBtn").data('status', 0);
                $.ajax({
                    url: baseUrl+"/likesAndCollects"+"/deleteTravelLike/"+user.id+"/"+travelId,
                    type: 'DELETE',
                    success: function (data) {
                        $(document).dialog({
                            overlayClose: true,
                            content: '取消点赞成功'
                        });
                    }
                })
            }
        })







    });

    function renderView(data) {
        $("#comment").renderValues(data);
    }
</script>

</body>
</html>